@import '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';

$cells-count: 22;
$cells-without-titles: $cells-count - 2;

.table {
  display: grid;
  grid-template-columns: repeat($cells-count, max-content);
  flex-direction: column;
  width: max-content;
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
  width: 50px;
  height: 50px;

  &:nth-child(#{$cells-count}n - #{$cells-without-titles}), &:nth-child(#{$cells-count}n) {
    border-left: 1px solid $sys-neutral-decor-default;
  }
}

.firstRowCell {
  border-top: 1px solid $sys-neutral-decor-default;
}

.lastRowCell {
  border-bottom: 1px solid $sys-neutral-decor-default;
}

.firstCell {
  justify-content: flex-end;
  padding-right: 8px;
}

.lastCell {
  justify-content: flex-start;
  padding-left: 8px;
}

.lastCell, .firstCell {
  color: $sys-neutral-text-disabled;
}